<template>
    <div class="app">
        <div class="login-box">
            <el-card class="login">
                <div slot="header" class="login-box-header">
                   <div style="position: relative; top: -20px">
                       <h2>登录</h2>
                   </div>
                </div>
                <el-form
                        v-model="formLogin"
                        ref="formLogin"
                >
                    <el-form-item label="账号">
                        <el-input
                                name="username"
                                v-model="formLogin.username"
                                placeholder="请输入账号"
                                type="text"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input
                                v-model="formLogin.password"
                                type="text"
                                placeholder="请输入密码"
                                @keyup.enter.native="handleLogin"
                                show-password="true"
                        ></el-input> <!--@keyup.enter.native回车可以直接登录-->
                    </el-form-item>
                    <el-form-item>
                        <el-button
                                type="primary"
                                @click.native.prevent="handleLogin"
                        >登录</el-button>
                        <el-button>注册</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                formLogin: {
                    username:'',
                    password:''
                },
                loading: false,
            }
        },
        methods: {
            handleLogin() {
                this.$refs.formLogin.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$store
                            .dispatch("Login",this.formLogin)
                            .then(response => {
                                this.loading = false;
                                let code = response.data.code;
                                if (code == 200) {
                                    this.$router.push({
                                        path: "/success",
                                        query: { data: response.data.data }
                                    });
                                } else {
                                    this.$router.push({
                                        path: "/error",
                                        query: { message: response.data.message}
                                    });
                                }
                            })
                            .cath(() => {
                                this.loading = false;
                            });
                    } else {
                        console.log("参数验证不合法!");
                        return false;
                    }
                });
            }
        }
    };
</script>

<style>
    .login-box {
        width: 430px;
        height: 385px;
        text-align:center;
        position: relative;
        top: 6.25rem;
        margin: 0 auto;
        background-color: #66B1FF;
    }
    .login {
        position: relative;
        top: 10px;
        width: 430px;
        height: 365px;
        margin: 0 auto;
    }
    .login-box-header {
        height: 10px;
    }
</style>
